<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" ></script>
<script src="/js/gu.js" type="text/javascript" ></script>
<script src="/js/main.js" type="text/javascript" ></script>
<script>
// popup page function:

// init
$(function() {
    // get contexts, if null init.
    contexts = get('contexts');
    if(contexts == null){ contexts = {'defualt':[{'url':'http://google.com'}]}; save('contexts',contexts); }
    // show them in all lists
    for(contextName in contexts){
          $("#contextSelect").prepend("<option>"+contextName+"</option>");
          $("#deleteSelect").append("<option>"+contextName+"</option>");
          $("#saveAsSelect").append("<option>"+contextName+"</option>");
    }
    //show  new
    $("#contextSelect").append("<option>[new]</option>")
    $("#contextSelect").append("<option>[save as]</option>")
})

function handleSelect(){
  t = document.getElementById('contextSelect');
  name = t.options[ t.selectedIndex ].text
  if(name == '[new]'){
    $('#new_context').show('slow');
     document.getElementById("newName").focus();
     return;
  }
  if(name == '[save as]'){
    $('#save_as_context').show('slow');
    document.getElementById("saveAsName").focus();
    return;
  }
  openContext(name);  
}

</script>

<select style="zoom:1.2" id="contextSelect" onChange="handleSelect()">
</select>

<div id="new_context" style="display:none" >
  Name: <input id="newName" onkeypress="if(window.event.which==13){openContext($(this).attr('value'))}">
</div>
<div id="save_as_context" style="display:none" >
  New Name: <input id="saveAsName" onkeypress="if(window.event.which==13){saveContextAs($(this).attr('value'))}">
  Or Form List: <select id="saveAsSelect" onChange="saveContextAs(this.options[ this.selectedIndex ].text)"></select>
</div>

<br/><a href="#" onclick="$('#more').toggle('slow');">More</a>
<div id="more" style="display:none">
  <a href="#" onclick="$('#deleteSection').toggle('slow');">Edit Contexts</a><br/>
  <div id="deleteSection" style="display:none">
    <select id="deleteSelect">
    </select>
    <button onclick="s = document.getElementById('deleteSelect'); deleteContext(  s.options[ s.selectedIndex ].text )">Delete</button>
  </div>
  <!-- <button onclick="openTab({url:'http://localhost:8080'})">Context Manager</button> -->
</div>